﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>JsStore Example</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="scripts/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
    <script src="scripts/bootstrap.js"></script>
    <link rel="stylesheet" href="style/font-awesome.min.css" />
    <script src="scripts/jsstore.js"></script>
    <script src="scripts/jsstore.worker.js"></script>
    <script src="scripts/index.js"></script>
</head>

<body>
    <div class="row row-centered " style="margin-top:10px; ">
        <div class="col-xs-12 col-sm-10 col-centered ">
            <div style="text-align:center;">
                <button id="btnAddStudent" class="btn btn-success">
                    <i class="fa fa-plus" aria-hidden="true"></i> Add Student</button>
            </div>
            <table id="tblGrid" class="table table-hover ">
                <caption
                    style="text-align:center;padding:7px 0px 7px 0px;background:#4f4f86;color:white;font-family:cursive;font-size:18px; ">
                    Student's Details</caption>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Country</th>
                        <th>City</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <form id="formAddUpdate" class="form-horizontal" role="form" style="margin-top:50px; display: none;">
                <div class="form-group">
                    <label class="control-label col-sm-3" for="txtName">Name:</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="txtName" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3" for="txtLastName">Gender:</label>
                    <div class="col-sm-7">
                        <label class="radio-inline">
                            <input type="radio" value="male" name="gender" />Male</label>
                        <label class="radio-inline">
                            <input type="radio" value="female" name="gender" />FeMale</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3" for="txtCountry">Country:</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="txtCountry" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3" for="txtCity">City:</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="txtCity" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12" style="text-align:center;margin-top:30px;">
                        <button id="btnSubmit" type="button" class="btn btn-primary" style="padding:9px 15px 9px 15px;">
                            <i class="fa fa-check" aria-hidden="true"></i>
                            <span>Submit</span>
                        </button>
                        <button id="btnCancel " type="button" class="btn btn-primary "
                            style="padding:9px 15px 9px 15px;margin-left:10px; ">
                            <i class="fa fa-times" aria-hidden="true"></i> Cancel
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <link href="style/main.css " rel="stylesheet " type="text/css " />
</body>

</html>